<template>
  <div style="margin-top: 160px;">
    <waterfall :searchinput="true"></waterfall>
  </div>
</template>

<script>
import waterfall from "./waterfall.vue";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  watch,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    waterfall,
  },
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      searchinput: "",
    });
    watch(
      () => router.currentRoute.value.query.searchinput,
      (newVal, oldVal) => {
        // if (newVal) {
        data.searchinput = newVal;
        store.commit("setsearchData", data.searchinput);
        // }
      }
    );
    onMounted(() => {
      data.searchinput = router.currentRoute.value.query.searchinput;
      store.commit("setsearchData", data.searchinput);
    });
    onUnmounted(() => {});
    return {
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped></style>
